import React from 'react';
import './crmUserlistDetails.less';
import { Layout, Breadcrumb, Icon, DatePicker, Row, Cascader, Col, Button, Table, Tabs, Modal, Input, Select, Form, Pagination, message } from 'antd';
import $ from 'jquery';
import Config from '../../../common/config';
import { Link, hashHistory } from 'react-router';
import region from '../../../common/region';
import moment from 'moment';

const FormItem = Form.Item;
const config = new Config();
const TabPane = Tabs.TabPane;
const { Header, Content, Footer, Sider } = Layout;
const Option = Select.Option;
const { RangePicker } = DatePicker;
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');
const keyword = sessionStorage.getItem('keyword');//前台权限判断
const UserInfo = JSON.parse(window.sessionStorage.getItem('UserInfo'));//当前操作人信息

const NewAddressForm = Form.create()(
    (props) => {
        const { onSubmit, form, region } = props;
        const { getFieldDecorator } = form;
        const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
        return (
            <Form className="model-y-t">
                <FormItem {...formItemLayout} label="所在地区" hasFeedback>
                    {getFieldDecorator('area', {
                        rules: [{ required: true, type: 'array', message: '请选择收货地址所在的地区！' }],
                    })(
                        <Cascader options={region} placeholder="请选择省市区" />
                        )}
                </FormItem>
                <FormItem {...formItemLayout} label="详细地址" hasFeedback>
                    {getFieldDecorator('detail', {
                        initialValue: "",
                        validateTrigger: 'onBlur',
                        rules: [{
                            required: true, min: 3, max: 200, message: '请填写详细地址，长度在3到200个字符之间',
                        }],
                    })(
                        <Input type="textarea" rows={4} placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息" style={{ resize: 'none' }} />
                        )}
                </FormItem>
                <FormItem {...formItemLayout} label="收货人姓名" hasFeedback>
                    {getFieldDecorator('name', {
                        initialValue: "",
                        validateTrigger: 'onBlur',
                        rules: [{
                            required: true, max: 20, message: '请填写收货人姓名，不超过20个字',
                        }]
                    })(
                        <Input placeholder="请输入收货人姓名" />
                        )}
                </FormItem>
                <FormItem {...formItemLayout} label="联系方式" hasFeedback>
                    {getFieldDecorator('phone', {
                        initialValue: "",
                        validateTrigger: 'onBlur',
                        rules: [{
                            required: true, pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '请填写正确格式的手机号码或固话号码',
                        }]
                    })(
                        <Input placeholder="请输入手机号码或固话号码" />
                        )}
                </FormItem>
                <FormItem className={"zhifu-btn"}>
                    <Button type="primary" style={{ marginLeft: 120, width: 100 }} onClick={onSubmit}>保存</Button>
                </FormItem>
            </Form>
        );
    }
);
class CrmUserlistDetailsForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible1: false, //删除弹出框
            newAddressVisible: false, //新增地址
            deleteFeedbackVisible: false, //回访-删除弹出框
            addFeedbackVisible: false,//回访新增弹出框

            memberInfo: {},
            addressList: [],
            orderList: [],
            feedbackList: [],
            editState: false,
            managersList: [],//归属人数据列表
            userSourceList: [], //客户渠道数据列表
            addAddressVisible: false, //新增地址模态框的显示状态
            deleteAddressVisible: false, //删除地址模态框的显示状态
            editAddiressIndex: -1, //编辑的地址在地址列表中的索引
            deleteAddressIndex: -1,//删除的地址在地址列表中的索引
            feedbackContent: '',//回访记录内容
        }
    }

    componentDidMount() {
        this.handleRegion();
        this.getMemberDetail();
        this.getManagersList();
        this.getUserSourceList();
        // this.GetTheListOfAddresses();
    }
    //处理省市区数据
    handleRegion() {
        const setOptions = arr => {
            arr.map((item, key) => {
                item.value = item.name;
                item.label = item.name;
                if (item.child) {
                    item.children = item.child;
                    setOptions(item.children);
                }
            });
        }
        setOptions(region);
        this.setState({
            region
        });
    }
    //获取会员详情
    getMemberDetail() {
        $.ajax({
            url: `${config.CrmMember}/crm_user/GetCrmUserInfomationByID`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            data: {
                userid: this.props.params.userid
            },
            success: res => {
                console.log(res);
                if (res.code == 200) {
                    this.setState({
                        memberInfo: res.userInformation[0],
                        addressList: res.addressInformation,
                        orderList: res.orderInformation,
                        feedbackList: res.visitInformation,
                    });
                }
            }
        })
    }
    //加载客户归属人的数据列表
    getManagersList() {
        $.ajax({
            url: `${config.CrmDepartment}/department/deptree`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            data: {
                id: UserInfo.id
            },
            success: res => {
                console.log('加载客户归属人的数据列表', res);
                if (res.code == 200) {
                    let managersList = [UserInfo].concat(res.userlist);
                    console.log('getManagersList', managersList)
                    this.setState({
                        managersList,
                    });
                }
            }
        })
    }
    //加载客户渠道的数据列表
    getUserSourceList() {
        $.ajax({
            url: `${config.CrmSettings}/crm_customersource/BindSource`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            success: res => {
                if (res.code == 200) {
                    this.setState({
                        userSourceList: res.data,
                    });
                }
            }
        })
    }

    //改变编辑状态
    changeEditState() {
        console.log('changeEditState')
        this.setState({
            editState: true
        })
    }
    //保存修改的会员信息
    saveEditMember(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('会员信息：', this.state.memberInfo);
                if (values.wxid == this.state.memberInfo.wxid) {
                    values.wxid = '没改动';
                }
                values.id = this.props.params.userid;
                console.log(values);
                $.ajax({
                    url: `${config.CrmMember}/crm_user/UpdateCrmUser`,
                    headers: { Authorization: 'Bearer ' + token },
                    type: "post",
                    data: values,
                    success: res => {
                        console.log(res)
                        console.log('tttt', values)
                        if (res.code == 200) {
                            message.success(res.mes, 2);
                            this.props.form.resetFields();
                            this.setState({
                                editState: false,
                            })
                            this.getMemberDetail();
                        } else {
                            message.error('服务器繁忙，请稍后再试', 2);
                        }
                    }
                })
                this.setState({
                    editState: false,
                });

            } else {
                message.error('请正确填写必要的信息，再提交', 2);
            }
        })
    }

    //新增地址
    addAddress() {
        if (this.state.addressList.length === 10) {
            message.warning('您可以添加的地址上限为10条，不能再添加新地址了', 3);
        } else {
            this.setState({
                addAddressVisible: true,
                editAddiressIndex: -1,
            });
        }
    }
    //修改地址
    editAddiress(index) {
        console.log('修改地址弹出框内容', this.state.addressList[index])
        const address = this.state.addressList[index];
        if (typeof address.area == 'string') {
            address.area = address.area.split(' ');
        }
        this.setState({
            addAddressVisible: true,
            editAddiressIndex: index,
            id: address.id,
        }, () => {
            this.addressForm.setFieldsValue(address);
        });
        console.log('address', address.id)
    }
    //取消保存地址
    cancelAddAddress() {
        this.addressForm.resetFields();
        this.setState({
            addAddressVisible: false
        });
        // $.ajax({
        //     url: `${config.CrmMember}/crm_user/UpdateCrmAddress`,
        //     type: "post",
        //     data: {
        //         id: values.id,
        //         area: values.area.join(' '),// 区域
        //         detail: values.detail, // 详细地址
        //         name: values.name, // 姓名
        //         phone: values.phone, // 联系方式
        //     },
        //     success: res => {
        //         if (res.code == 200) {

        //         } else {
        //             message.error('服务器繁忙，请稍后再试。', 2);
        //         }
        //     }
        // })
    }
    //保存地址
    handleAddAddress() {
        this.addressForm.validateFields((err, values) => {
            if (!err) {
                const { addressList, editAddiressIndex } = this.state;
                console.log('UpdateCrmAddress', values)
                console.log('UpdateCrmAddress', this.state.id)
                if (this.state.id > 0) {
                    $.ajax({
                        url: `${config.CrmMember}/crm_user/UpdateCrmAddress`,
                        headers: { Authorization: 'Bearer ' + token },
                        type: "post",
                        data: {
                            id: this.state.id,
                            area: values.area.join(' '),// 区域
                            detail: values.detail, // 详细地址
                            name: values.name, // 姓名
                            phone: values.phone, // 联系方式
                        },
                        success: res => {
                            if (res.code == 200) {
                                this.setState({
                                    addressList,
                                    addAddressVisible: false
                                });
                                this.addressForm.resetFields();
                                this.getMemberDetail();
                            } else {
                                message.error('服务器繁忙，请稍后再试。', 2);
                            }
                        }
                    })
                } else {
                    $.ajax({
                        url: `${config.CrmMember}/crm_user/AddAddressInOrder`,
                        headers: { Authorization: 'Bearer ' + token },
                        type: "post",
                        data: {
                            userid: this.props.params.userid, //用户ID
                            area: values.area.join(' '),// 区域
                            detail: values.detail, // 详细地址
                            name: values.name, // 姓名
                            phone: values.phone, // 联系方式
                        },
                        success: res => {
                            console.log('yufsdfd', res)
                            console.log('111111111', {
                                userid: this.props.params.userid, //用户ID
                                area: values.area,// 区域
                                detail: values.detail, // 详细地址
                                name: values.name, // 姓名
                                phone: values.phone, // 联系方式
                            })
                            if (res.code == 200) {
                                message.success(res.mes, 2);
                                console.log('保存地址', addressList)
                                this.setState({
                                    addressList,
                                    addAddressVisible: false
                                });
                                this.addressForm.resetFields();
                                this.getMemberDetail();
                            } else {
                                message.error('最多保存10个地址！', 2)
                            }
                        }
                    })
                }
            } else {
                message.error(`请正确填写必要的信息，再保存`, 2);
            }
        });
    }
    // //获取地址列表
    // GetTheListOfAddresses() {
    //     $.ajax({
    //         url: `${config.CrmMember}/crm_user/AddresslistInOrder/${this.props.params.userid}`,
    //         type: "get",
    //         success: res => {
    //             console.log('用户', res)
    //             console.log('用户的', {
    //                 userid: this.props.params.userid, //用户ID
    //             })
    //             if (res.code == 200) {
    //                 this.setState({
    //                     addressList: res.data,
    //                 })
    //             } else {
    //                 message.error('服务器繁忙，请稍后再试。', 2);
    //             }
    //         }
    //     })
    // }
    //删除地址
    deleteAddress(index) {
        this.setState({
            deleteAddressVisible: true,
            deleteAddressIndex: index
        });
    }
    //确认删除地址
    handleDeleteAddress() {
        let { addressList, deleteAddressIndex } = this.state;
        let id;
        addressList.forEach((item, index) => {
            if (index === deleteAddressIndex) {
                id = item.id;
            }
        })
        $.ajax({
            url: `${config.CrmMember}/crm_user/deleteAddress`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            data: {
                id: id
            },
            success: res => {
                console.log('删除', res)
                if (res.code == 200) {
                    this.setState({
                        // addressList: res.data,
                        deleteAddressVisible: false,
                    })
                    this.getMemberDetail()
                } else {
                    message.error('服务器繁忙，请稍后再试。', 2);
                }
            }
        })
    }
    //取消删除地址
    cancelDeleteAddress() {
        this.setState({
            deleteAddressVisible: false,
        });
    }

    //显示新增回访记录模态框
    addFeedback() {
        this.setState({
            addFeedbackVisible: true,
            feedbackContent: '',
        });
    }
    changeFeedbackContent(e) {
        this.setState({
            feedbackContent: e.target.value,
        });
    }
    //确认新增回访记录
    handleAddFeedback() {
        const { feedbackContent } = this.state;
        if (feedbackContent == '' || feedbackContent.length > 500) {
            message.error('回访记录的沟通内容不能为空，不能超过500个字，提交失败', 2);
            return;
        }
        $.ajax({
            url: `${config.CrmMember}/crm_user/AddReturnVisit`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            data: {
                userid: this.props.params.userid,
                visitcontent: feedbackContent,
                visitmanagerid: UserInfo.userid,
            },
            success: res => {
                console.log(res);
                console.log('oooo',
                    {
                        userid: this.props.params.userid,
                        visitcontent: feedbackContent,
                        visitmanagerid: UserInfo.userid,
                    }
                )
                if (res.code == 200) {
                    message.success('添加成功', 2)
                    this.setState({
                        addFeedbackVisible: false,
                        feedbackContent: res.data,
                    });
                    this.getMemberDetail()
                } else if (res.code == 202) {
                    message.error('此操作人不属于任何部门', 2)
                } else {
                    message.error('服务器繁忙，请稍后再试', 2)
                }
            }
        })
    }
    //取消新增回访记录
    cancelAddFeedback() {
        this.setState({
            addFeedbackVisible: false,
        });
    }

    //显示删除回访记录模态框
    deleteFeedback(id) {
        this.setState({
            deleteFeedbackVisible: true,
            deleteFeedbackId: id,
        });
    }
    //确认删除回访记录
    handleDeleteFeedback() {
        $.ajax({
            url: `${config.CrmMember}/crm_user/DelReturnVisit`,
            headers: { Authorization: 'Bearer ' + token },
            type: "post",
            data: {
                id: this.state.deleteFeedbackId,
                userid: this.props.params.userid
            },
            success: res => {
                console.log(res);
                if (res.code == 200) {
                    message.success('删除成功', 2)
                    this.setState({
                        deleteFeedbackVisible: false,
                        feedbackContent: res.data,
                    });
                    this.getMemberDetail()
                } else {
                    message.error('服务器繁忙，请稍后再试', 2)
                }
            }
        })
    }
    //取消删除回访记录
    cancelDeleteFeedback() {
        this.setState({
            deleteFeedbackVisible: false,
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { memberInfo, editState, managersList, userSourceList, addressList, orderList, feedbackList } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 12 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 12 },
                sm: { span: 18 },
            },
        };
        const userSourceOptions = userSourceList.map((val, i) => {
            return <Option key={val.id} value={val.id.toString()}>{val.sourcename}</Option>
        });
        const customersource = userSourceList.find((element) => {
            return element.id == memberInfo.customersourceid;
        });
        const managersOptions = managersList.map((val) => {
            console.log(1111, val.userid);
            return <Option key={val.id} value={String(val.userid)}>{val.username}</Option>
        });
        const orderColumn = [
            {
                title: '订单编号',
                dataIndex: 'orderId',
                width: '7%',
            }, {
                title: '下单时间',
                dataIndex: 'createDate',
                width: '6%',
            }, {
                title: '下单人',
                dataIndex: 'createrName',
                width: '6%',
            }, {
                title: '订单状态',
                dataIndex: 'orderStatus',
                width: '6%',
                render: (text, record) => {
                    if (text == 0) return "未处理";
                    if (text == 1) return "已处理";
                    if (text == 2) return "待发货";
                    if (text == 3) return "已发货";
                    if (text == 4) return "已签收";
                }
            }, {
                title: '订单金额',
                dataIndex: 'orderMoney',
                width: '4%',
            }, {
                title: '操作',
                dataIndex: 'operation',
                width: '5%',
                render: (text, record) => {
                    return keyword.includes('getOrderDetail') ? <a href={`#/orderDetail/${record.orderId}`}>详情</a> : '';
                }
            }
        ];
        const feedbackColumn = [
            {
                title: '沟通内容',
                dataIndex: 'visitcontent',
                width: '7%',
                render(text) {
                    return <p style={{ textAlign: "left" }}>{text}</p>;
                }
            }, {
                title: '沟通时间',
                dataIndex: 'createdAt',
                width: '6%',
                render(text) {
                    return moment(text).format('YYYY-MM-DD HH:mm:ss');
                }
            }, {
                title: '创建人员',
                dataIndex: 'username',
                width: '6%',
            }, {
                title: '部门',
                dataIndex: 'departmentName',
                width: '6%',
            }, {
                title: '操作',
                dataIndex: 'delete',
                width: '5%',
                render: (text, record) => {
                    return keyword.includes('crm_userDelReturnVisit') ? <a onClick={() => this.deleteFeedback(record.id)}>删除</a> : '';
                }
            }
        ];
        const path = {
            pathname: '/crmUserlist',
            state: this.props.location.state,
        }
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>会员管理</Breadcrumb.Item>
                                <Breadcrumb.Item>直销会员列表</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='ydoty-a'>
                            <Link to={path}> <Icon type="left" />返回</Link>
                            {/* <Link to='/crmUserlist'> <Icon type="left" />返回</Link> */}
                        </div>
                        {/* 会员信息 */}
                        <div className='acmilan' style={{ marginTop: 40 }}>
                            {keyword.includes('crm_userUpdateCrmUser') ?
                                <h1>
                                    <span>客户信息</span>
                                    {
                                        editState ? <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={(e) => this.saveEditMember(e)}>保存</a>
                                            : <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={() => this.changeEditState()}>修改</a>
                                    }
                                </h1>
                                : ''}
                            <Row>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="手 机 号">
                                        <p>{memberInfo.phone}</p>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="创 建 人">
                                        <p>{memberInfo.CeateUserName}</p>
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="归 属 人">
                                        {
                                            editState ? getFieldDecorator('manageuserid', {
                                                initialValue: memberInfo.manageuserid
                                            })(
                                                <Select>{managersOptions}</Select>
                                                )
                                                : <p>{memberInfo.ManageUserName}</p>
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="客户姓名" hasFeedback>
                                        {
                                            editState ? getFieldDecorator('realname', {
                                                initialValue: memberInfo.realname,
                                                validateTrigger: 'onBlur',
                                                rules: [{ required: true, whitespace: true, max: 20, message: "请填写客户的姓名，不多于20个字" }],
                                            })(
                                                <Input placeholder="请输入客户姓名" />
                                                )
                                                : <p>{memberInfo.realname}</p>
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="性 别">
                                        {
                                            editState ? getFieldDecorator('sex', {
                                                rules: [{ required: true }], initialValue: memberInfo.sex
                                            })(
                                                <Select>
                                                    <Option value="1">男</Option>
                                                    <Option value="0">女</Option>
                                                    <Option value="2">保密</Option>
                                                </Select>
                                                )
                                                : <p>{memberInfo.sex == '1' ? "男" : memberInfo.sex == '0' ? "女" : memberInfo.sex == '2' ? "保密" : ""}</p>
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="客户渠道">
                                        {
                                            editState ? getFieldDecorator('customersourceid', {
                                                rules: [{ required: true }], initialValue: memberInfo.customersourceid
                                            })(
                                                <Select>{userSourceOptions}</Select>
                                                )
                                                : <p>{customersource && customersource.sourcename}</p>
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="微 信 号" hasFeedback>
                                        {
                                            editState ? getFieldDecorator('wxid', {
                                                initialValue: memberInfo.wxid,
                                                validateTrigger: 'onBlur',
                                                rules: [{ max: 20, message: "微信号不能多于20个字" }],
                                            })(
                                                <Input placeholder="请输入微信号" />
                                                )
                                                : <p>{memberInfo.wxid}</p>
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label="客户状态">
                                        {
                                            editState ? getFieldDecorator('customerstatus', {
                                                initialValue: memberInfo.customerstatus
                                            })(
                                                <Select>
                                                    <Option value="1">成交</Option>
                                                    <Option value="2">意向客户</Option>
                                                </Select>
                                                )
                                                : <p>{memberInfo.customerstatus == 1 ? "成交" : memberInfo.customerstatus == 2 ? "意向客户" : ""}</p>
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <FormItem labelCol={{ xs: { span: 4 }, sm: { span: 2 } }} wrapperCol={{ xs: { span: 20 }, sm: { span: 22 } }} label="客户需求">
                                        {
                                            editState ? getFieldDecorator('remark', {
                                                initialValue: memberInfo.remark,
                                                validateTrigger: 'onBlur',
                                                rules: [{ max: 500, message: "客户需求不能多于500个字" }],
                                            })(
                                                <Input type="textarea" rows={3} placeholder="请输入客户需求，不多于500个字" style={{ resize: "none" }} />
                                                )
                                                : <p className='yours_yos'>{memberInfo.remark}</p>
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                        </div>

                        <Tabs defaultActiveKey="1">
                            {keyword.includes('UserAddressList') ?
                                <TabPane tab="收货地址" key="1">
                                    <div className="dizhieiy-caotuht">
                                        {keyword.includes('crm_userAddAddressInOrder') ?
                                            <div className="dizhieiy">
                                                <a className='member-button-tgd-a' onClick={() => this.addAddress()} style={{ width: 100, marginBottom: 20 }} type='primary'><Icon type="plus" />新增</a>
                                            </div>
                                            : ''}
                                        {/* 地址列表 */}
                                        {
                                            addressList.map((item, index) => {
                                                return <div className='caotuht' key={index}>
                                                    <Row style={{ lineHeight: '28px' }}>
                                                        <Col span={4}>收货人：{item.name}</Col>
                                                        <Col span={4}>手机号码：{item.phone}</Col>
                                                        <Col span={10}>所在地区：{item.area + " " + item.detail}</Col>
                                                        <Col span={6}>
                                                            {keyword.includes('crm_userUpdateCrmAddress') ?
                                                                <a onClick={() => this.editAddiress(index)} className="member-button-tgd-a" style={{ marginRight: 20 }}>修改</a> : ''}
                                                            {keyword.includes('crm_userdeleteAddress') ?
                                                                <a onClick={() => this.deleteAddress(index)} className="member-button-tgd-a">删除</a> : ''}
                                                        </Col>
                                                    </Row>
                                                </div>
                                            })
                                        }
                                        {/* 新增收货地址 */}
                                        <Modal
                                            title="新增收货地址 打红色*为必填项"
                                            visible={this.state.addAddressVisible}
                                            onCancel={() => this.cancelAddAddress()}
                                            footer={null}
                                            maskClosable={false}
                                        >
                                            <div className='baoigg'>
                                                <NewAddressForm
                                                    ref={(form) => this.addressForm = form}
                                                    onSubmit={this.handleAddAddress.bind(this)}
                                                    region={region}
                                                />
                                            </div>
                                        </Modal>
                                        {/* 删除收货地址 */}
                                        <Modal
                                            title="删除收货地址"
                                            visible={this.state.deleteAddressVisible}
                                            onOk={() => this.handleDeleteAddress()}
                                            onCancel={() => this.cancelDeleteAddress()}
                                            maskClosable={false}
                                        >
                                            <div className='delets_gg'>
                                                <p className='delets_gg1'>温馨提示</p>
                                                <p>删除后不可恢复，是否继续删除？</p>
                                            </div>
                                        </Modal>
                                    </div>
                                </TabPane>
                                : ''}

                            {keyword.includes('UserOrderList') ?
                                <TabPane tab="订单列表" key="2">
                                    <div className="dizhieiy-caotuht">
                                        {keyword.includes('setOrder') ?
                                            <div className="dizhieiy">
                                                <a href={`./#/crmSetOrder/${memberInfo.id}`} className='member-button-tgd-a' style={{ width: 100, marginBottom: 20 }} type='primary'>新建订单</a>
                                            </div>
                                            : ''}
                                        <div className='caotuht-uyu'>
                                            <h1>订单列表</h1>
                                            <div className='allgoods-table clearfix'>
                                                <Table
                                                    rowKey='orderId'
                                                    columns={orderColumn}
                                                    dataSource={orderList}
                                                    pagination={false}
                                                    bordered
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                                : ''}

                            {keyword.includes('UserReturnVisitList') ?
                                <TabPane tab="回访纪录" key="3">
                                    <div className="dizhieiy-caotuht">
                                        {keyword.includes('crm_userAddReturnVisit') ?
                                            <div className="dizhieiy">
                                                <a className='member-button-tgd-a' style={{ width: 100, marginBottom: 20 }} onClick={() => this.addFeedback()} type='primary'><Icon type="plus" />新增</a>
                                            </div>
                                            : ''}
                                        <div className='caotuht-uyu'>
                                            <h1>回访记录</h1>
                                            <div className='allgoods-table clearfix'>
                                                <Table
                                                    rowKey='id'
                                                    columns={feedbackColumn}
                                                    dataSource={feedbackList}
                                                    pagination={false}
                                                    bordered
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    {/* 新增回访记录 */}
                                    <Modal
                                        title="新增回访记录"
                                        visible={this.state.addFeedbackVisible}
                                        onOk={this.handleAddFeedback.bind(this)}
                                        onCancel={this.cancelAddFeedback.bind(this)}
                                        maskClosable={false}
                                    >
                                        <div style={{ marginTop: 10, marginBottom: 10 }}>
                                            <p style={{ marginBottom: 10 }}>
                                                <Row>
                                                    <Col span={3}><span>客户姓名：</span></Col>
                                                    <Col span={21}>{memberInfo.realname}</Col>
                                                </Row>
                                            </p>
                                            <p>
                                                <Row>
                                                    <Col span={3}><span>沟通内容：</span></Col>
                                                    <Col span={21}><Input value={this.state.feedbackContent} onChange={(e) => this.changeFeedbackContent(e)} type="textarea" rows={3} placeholder="请输入沟通内容，不多于500个字" style={{ resize: "none" }} /></Col>
                                                </Row>
                                            </p>
                                        </div>
                                    </Modal>
                                    {/* 删除回访记录 */}
                                    <Modal
                                        title="删除回访记录"
                                        visible={this.state.deleteFeedbackVisible}
                                        onOk={() => this.handleDeleteFeedback()}
                                        onCancel={() => this.cancelDeleteFeedback()}
                                        maskClosable={false}
                                    >
                                        <div className='delets_gg'>
                                            <p className='delets_gg1'>温馨提示</p>
                                            <p>删除后不可恢复，是否继续删除？</p>
                                        </div>
                                    </Modal>
                                </TabPane>
                                : ''}
                        </Tabs>
                    </div>
                </div>
            </Form>
        )
    }
}

const CrmUserlist = Form.create()(CrmUserlistDetailsForm);
export default CrmUserlist;